<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>论文检索系统</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            background: darkred;
        }

        .row {
            background: white;
            border-radius: 30px;
            box-shadow: 12px 12px 22px darkred;
        }

        .btn1 {
            border: none;
            outline: none;
            height: 50px;
            width: 100%;
            background-color: black;
            color: white;
            border-radius: 4px;
            font-weight: bold;
        }

        .btn1:hover {
            background: white;
            border: 1px solid;
            color: black;
        }
    </style>
</head>

<body>
<section class="Form my-4 mx-5">
    <div class="container">
        <div class="row row-no-gutters">
            <div class="col-lg-10 px-5 pt-5">
                <h2 class="font-weight-bold py-3" style="margin-left: 500px;">新用户注册</h2>
                <form class="form-horizontal" method="post" th:action="@{/register}" onsubmit="return register();">
                    <div class="form-row" style="margin-left: 400px;">
                        <div class="col-lg-8">
                            <input type="text" id="name" name="name" placeholder="请输入用户名" class="form-control my-4 p-4">
                        </div>
                    </div>
                    <div class="form-row" style="margin-left: 400px;">
                        <div class="col-lg-8">
                            <input type="password" id="pwd" name="pwd" placeholder="请输入密码" class="form-control my-4 p-4">
                        </div>
                    </div>
                    <div class="form-row" style="margin-left: 400px;">
                        <div class="col-lg-8">
                            <input type="text" id="phone" name="phone" placeholder="请输入手机号" class="form-control my-4 p-4">
                        </div>
                    </div>
                    <div class="form-row" style="margin-left: 400px;">
                        <div class="col-lg-8">
                            <input type="text" id="mailbox" name="mailbox" placeholder="请输入邮箱" class="form-control my-4 p-4">
                        </div>
                    </div>
                    <div class="form-row" style="margin-left: 400px;">
                        <div class="col-lg-8">
                            <button type="submit" class="btn1 mt-3 mb-5">Register</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
</body>

<script th:inline="javascript">
    function register() {
        let name = document.getElementById("name").value;
        let pwd = document.getElementById("pwd").value;
        let phone = document.getElementById("phone").value;
        let mailbox = document.getElementById("mailbox").value;
        let nameList = [[${nameList}]];

        if (name === "" || pwd === "" || phone === "" || mailbox === "") {
            alert("请输入完整信息！");
            return false;
        }
        for (let i = 0; i < nameList.length; i++) {
            if (name === nameList[i]) {
                alert("用户名已存在！");
                return false;
            }
        }
        alert("注册成功！");
        return true;
    }
</script>

</html>